<template>
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
  <!--  配置版本管理-->
      <el-col :span="20">
        <div class="page">
          <!-- 条件筛选 -->
          <div class="page_filter">
            <el-radio-group v-model="radio" @change="changeRadio">
              <el-radio-button label="巡查列表"></el-radio-button>
              <el-radio-button label="病害列表"></el-radio-button>
              <el-radio-button label="统计"></el-radio-button>
            </el-radio-group>
          </div>
          <div class="page_main">
            <!--   巡查列表 -->
            <div v-if="radio==='巡查列表'">
              <el-row :gutter="20">
                <el-col :span="left_col">
                  <div class="page_filter">
                    <el-button icon="el-icon-plus" slot="reference" class="common_btn-small" @click="addPatrol">开始巡查
                    </el-button>
                    <!--              <el-input v-model="form.queryString" clearable placeholder="模糊查询">-->
                    <!--                <template slot="prepend">关键字查询</template>-->
                    <!--              </el-input>-->

                    <el-date-picker
                      clearable
                      style="width:400px;height: 40px"
                      @change="isSearch=true"
                      value-format="timestamp"
                      v-model="timerArray"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                    <el-select v-model="form.roadType" clearable placeholder="线路类型" style="width: 120px">
                      <el-option
                        v-for="item in EnumPatrolRoadTypeList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                      </el-option>
                    </el-select>
                    <el-select v-model="form.roadPatrolStatus" clearable placeholder="巡查状态" style="width: 120px">
                      <el-option
                        v-for="item in EnumRoadPatrolStatusList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                      </el-option>
                    </el-select>

                    <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索
                    </el-button>
                  </div>
                  <!-- table -->
                  <div class="common_btnBox ">

                    <i class="iconfont iconzongshu icon-size"></i>
                    总数：{{ form.total }}
                  </div>
                  <el-table :data="tableList" @expand-change="queryDamageList" border key="巡查列表">
                    <el-table-column type="expand">
                      <template slot-scope="scope">
                        <!-- 区间表单 -->
                        <el-table :data="scope.row.children || []" border
                                  v-loading="loading">
                          <el-table-column label="序号" fixed width="70">
                            <template slot-scope="scope">
                              {{ getIndex(scope.$index) }}
                            </template>
                          </el-table-column>
                          <el-table-column prop="picUrl" label="病害照片" min-width="110">
                            <template slot-scope="scope" v-if="scope.row.picList&&scope.row.picList.length > 0">
                              <el-image style="width: 60px; height: 60px;cursor: pointer;"
                                        :src="constUrl + scope.row.picList[0]"
                                        fit="fill" @click="previewImg(constUrl + scope.row.picList[0])">
                                <div slot="error"
                                     style="width: 60px; height: 60px;text-align: center;line-height: 60px;font-size: 60px">
                                  <i class="el-icon-picture-outline"></i>
                                </div>
                              </el-image>
                            </template>
                          </el-table-column>
                          <el-table-column prop="name" show-overflow-tooltip label="病害名称"
                                           min-width="150"></el-table-column>
                          <el-table-column prop="startPointBig" label="桩号位置1" min-width="120">
                            <template slot-scope="scope">
                              {{
                              'K' + scope.row.pointBig + '+' + scope.row.pointSmall + 'm'
                              }}
                            </template>
                          </el-table-column>
                          <el-table-column prop="positionName" label="方向" min-width="80"></el-table-column>
                          <el-table-column prop="installationTypeName" label="病害设施类型" min-width="150"></el-table-column>
                          <el-table-column prop="riskLevelName" min-width="100" label="处置状态">
                            <template slot-scope="scope">
                              <el-tag size="mini" :style="scope.row.handleStatus| gradeColor"
                                      style="color: white">
                                {{ scope.row.handleStatusName }}
                              </el-tag>
                            </template>
                          </el-table-column>
                          <el-table-column prop="riskLevelName" min-width="80" label="警示牌">
                            <template slot-scope="scope">
                              <el-tag size="mini" :style="scope.row.jingShiPai| gradeColor2"
                                      style="color: white">
                                {{ scope.row.jingShiPaiName }}
                              </el-tag>
                            </template>
                          </el-table-column>
                          <el-table-column prop="riskLevelName" min-width="100" label="监测状态">
                            <template slot-scope="scope">
                              <el-tag size="mini" :style="scope.row.monitorStatus| gradeColor"
                                      style="color: white">
                                {{ scope.row.monitorStatusName }}
                              </el-tag>
                            </template>
                          </el-table-column>
                          <el-table-column prop="startCreateTime" width="180" label="发现病害时间">
                            <template slot-scope="scope">{{ scope.row.createTime | formatTimer }}</template>
                          </el-table-column>
                          <el-table-column label="操作" fixed="right" width="180">
                            <template slot-scope="scope">
                              <button class="btn_edit" @click="repair(scope.row)">整治</button>
                              <button class="btn_add" @click="lookDamageDetail(scope.row)">处置记录</button>
                              <el-popconfirm
                                v-if="scope.row.isDelete === 1"
                                confirmButtonText='删除'
                                cancelButtonText='不用了'
                                icon=""
                                title="确定删除吗？"
                                @confirm="deleteDamage(scope.row.id)"
                              >
                                <button slot="reference"  class="btn_delete">删除</button>
                              </el-popconfirm>
                            </template>
                          </el-table-column>
                        </el-table>
                      </template>

                    </el-table-column>
                    <el-table-column prop="deptName" show-overflow-tooltip label="巡查单位"
                                     min-width="120"></el-table-column>
                    <el-table-column prop="roadName" show-overflow-tooltip label="路线" min-width="100"></el-table-column>
                    <el-table-column prop="roadTypeName" show-overflow-tooltip label="路线类型" min-width="100"></el-table-column>

                    <el-table-column prop="investigator" show-overflow-tooltip label="巡查人员" min-width="110"></el-table-column>
                    <el-table-column prop="investigateCount" label="人次" width="70"></el-table-column>
                    <el-table-column prop="startPointBig" label="起止桩号" min-width="150">
                      <template slot-scope="scope">
                        <span v-if="scope.row.roadPatrolStatus === 2">
                           {{
                            'K' + scope.row.startPointBig + '+' + scope.row.startPointSmall + '- K' + scope.row.endPointBig + '+' + scope.row.endPointSmall
                          }}
                        </span>
                        <span v-else>
                           {{
                            'K' + scope.row.startPointBig + '+' + scope.row.startPointSmall
                          }}
                        </span>

                      </template>
                    </el-table-column>
                    <el-table-column prop="length" label="巡查长度" min-width="100">
                      <template slot-scope="scope">
                        <span v-if="scope.row.roadPatrolStatus === 2">
                          {{scope.row.length/1000}}km
                        </span>
                        <span v-else>
                          -
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="damageCount" label="病害数量" min-width="70"></el-table-column>
                    <el-table-column prop="riskLevelName" min-width="95" label="巡查状态">
                      <template slot-scope="scope">
                        <el-tag size="mini" :style="scope.row.roadPatrolStatus| patrolColor"
                                style="color: white">
                          {{ scope.row.roadPatrolStatusName }}
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="createTime" min-width="180" label="巡查时间">
                      <template slot-scope="scope">{{ scope.row.createTime | formatTimer }}</template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="150">
                      <template slot-scope="scope">
                        <button class="btn_edit" v-if="scope.row.roadPatrolStatus === 1" @click="addDamage(scope.row.id)">
                          继续巡查
                        </button>
                        <button class="btn_delete" v-if="scope.row.roadPatrolStatus === 1" @click="endPatrol(scope.row)">
                          结束巡查
                        </button>

                        <el-popconfirm
                          v-if="scope.row.roadPatrolStatus === 1"
                          confirmButtonText='删除'
                          cancelButtonText='不用了'
                          icon=""
                          title="确定删除吗？"
                          @confirm="deletePatrol(scope.row.id)"
                        >
                          <button slot="reference"  class="btn_delete">删除</button>
                        </el-popconfirm>
                        <button class="btn_add" @click="lookDetail(scope.row)">巡查记录</button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <!-- 分页器 -->
                  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                 :current-page="form.page"
                                 :page-size="form.pageSize" :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                                 layout="sizes, prev, pager, next" :total="form.total">
                  </el-pagination>
                </el-col>
              </el-row>
            </div>
            <!--   病害列表-->
            <div v-if="radio==='病害列表'">
              <el-row :gutter="20">
                <el-col :span="left_col">
                  <div class="page_filter">
                    <el-input  style="width:280px" v-model="form.queryString" clearable placeholder="模糊查询">
                      <template slot="prepend">关键字查询</template>
                    </el-input>

                    <el-date-picker
                      clearable
                      style="width:370px;height: 40px"
                      value-format="timestamp"
                      v-model="timerArray"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                    <el-select v-model="form.installationType" clearable placeholder="病害设施" style="width: 120px">
                      <el-option
                        v-for="item in EnumDamageInstallationTypeList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                      </el-option>
                    </el-select>
                    <el-select v-model="form.handleStatus" clearable placeholder="处置状态" style="width: 120px">
                      <el-option
                        v-for="item in EnumPatrolHandleStatusList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                      </el-option>
                    </el-select>
                    <el-select v-model="form.monitorStatus" clearable placeholder="监测状态" style="width: 120px">
                      <el-option
                        v-for="item in EnumMonitorStatusList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                      </el-option>
                    </el-select>
                    <el-select v-model="form.jingShiPai" clearable placeholder="警示牌	" style="width: 100px">
                      <el-option
                        v-for="item in EnumSysBooleanList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                      </el-option>
                    </el-select>
                    <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索
                    </el-button>
                  </div>
                  <!-- table -->
                  <div class="common_btnBox ">

                    <i class="iconfont iconzongshu icon-size"></i>
                    总数：{{ form.total }}
                  </div>
                  <el-table :data="tableList" border key="病害列表">
                    <el-table-column label="序号" fixed width="70">
                      <template slot-scope="scope">
                        {{ getIndex(scope.$index) }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="picUrl" label="病害照片" min-width="110">
                      <template slot-scope="scope" v-if="scope.row.picList&&scope.row.picList.length > 0">
                        <el-image style="width: 60px; height: 60px;cursor: pointer;" :src="constUrl + scope.row.picList[0]"
                                  fit="fill" @click="previewImg(constUrl + scope.row.picList[0])">
                          <div slot="error"
                               style="width: 60px; height: 60px;text-align: center;line-height: 60px;font-size: 60px">
                            <i class="el-icon-picture-outline"></i>
                          </div>
                        </el-image>
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" show-overflow-tooltip label="病害名称"
                                     min-width="150"></el-table-column>
                    <el-table-column prop="deptName" show-overflow-tooltip label="巡查单位"
                                     min-width="120"></el-table-column>
                    <el-table-column prop="roadName" show-overflow-tooltip label="路线" min-width="120"></el-table-column>
                    <el-table-column prop="startPointBig" label="桩号位置" min-width="120">
                      <template slot-scope="scope">
                        {{
                        'K' + scope.row.pointBig + '+' + scope.row.pointSmall + 'm'
                        }}
                      </template>
                    </el-table-column>
                    <!--              <el-table-column prop="bridgeType" label="桥梁类型" width="70"></el-table-column>-->
                    <!--              <el-table-column prop="damageRiskType" label="病害类型" width="70"></el-table-column>-->
                    <!--              <el-table-column prop="damageStatus" label="病害结果" width="70"></el-table-column>-->
                    <el-table-column prop="positionName" label="方向" min-width="80"></el-table-column>
                    <el-table-column prop="installationTypeName" label="病害设施类型" min-width="150"></el-table-column>

                    <el-table-column prop="riskLevelName" min-width="100" label="处置状态">
                      <template slot-scope="scope">
                        <el-tag size="mini" :style="scope.row.handleStatus| gradeColor"
                                style="color: white">
                          {{ scope.row.handleStatusName }}
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="jingShiPai" min-width="80" label="警示牌">
                      <template slot-scope="scope">
                        <el-tag size="mini" :style="scope.row.jingShiPai| gradeColor2"
                                style="color: white">
                          {{ scope.row.jingShiPaiName }}
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="riskLevelName" min-width="100" label="监测状态">
                      <template slot-scope="scope">
                        <el-tag size="mini" :style="scope.row.monitorStatus| gradeColor"
                                style="color: white">
                          {{ scope.row.monitorStatusName }}
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="startCreateTime" width="180" label="发现病害时间">
                      <template slot-scope="scope">{{ scope.row.createTime | formatTimer }}</template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="160">
                      <template slot-scope="scope">
                        <button class="btn_edit" v-if="scope.row.roadPatrolStatus === 1" @click="addDamage(scope.row.id)">
                          继续巡查
                        </button>
                        <button class="btn_delete" v-if="scope.row.roadPatrolStatus === 1" @click="endPatrol(scope.row)">
                          结束巡查
                        </button>
                        <button class="btn_edit" @click="updateDamage(scope.row)">补充描述</button>
                        <button class="btn_edit" @click="repair(scope.row)">整治</button>
                        <button class="btn_add" @click="lookDamageDetail(scope.row)">处置记录</button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <!-- 分页器 -->
                  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                 :current-page="form.page"
                                 :page-size="form.pageSize" :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                                 layout="sizes, prev, pager, next" :total="form.total">
                  </el-pagination>
                </el-col>
                <el-col :span="right_col">鬆動扥</el-col>
              </el-row>
            </div>
            <!--      统计-->
            <div v-if="radio==='统计'" class="select_form_label statistics">

              <el-row>
                <el-col :span="8">
                  <div style="text-align: center">
                    <el-date-picker
                      clearable
                      style="min-width:400px;height: 40px"
                      value-format="timestamp"
                      v-model="timerArray2"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                    <div style="margin: 10px;padding: 20px 50px">
                      <el-button class="common_btn-defalut" style="width: 100%" icon="el-icon-search"
                                 @click="statisticsAll()">统计
                      </el-button>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <el-form label-position="right" ref="statistics" label-suffix="：" :rules="rule" :model="statistics"
                           label-width="0px">
                    <el-divider content-position="left">一、管养规模</el-divider>
                    <el-row>
                      <el-col :span="12">
                        <el-form-item prop="highwayLength">
                          <el-input v-model="statistics.highwayLength" placeholder="请输入" @input="isButtonShow = true">
                            <template slot="prepend">高速公路</template>
                            <template slot="append">(km)</template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="roadLength">
                          <el-input v-model="statistics.roadLength" placeholder="请输入" @input="isButtonShow = true">
                            <template slot="prepend">普通干线公路</template>
                            <template slot="append">(km)</template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-divider content-position="left">二、在役公里边坡</el-divider>
                    <el-row>
                      <el-col :span="12">
                        <el-form-item prop="highwayCount">
                          <el-input v-model="statistics.highwayCount" placeholder="请输入" @input="isButtonShow = true">
                            <template slot="prepend">高速公路</template>
                            <template slot="append">(处)</template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="roadCount">
                          <el-input v-model="statistics.roadCount" placeholder="请输入" @input="isButtonShow = true">
                            <template slot="prepend">普通干线公路</template>
                            <template slot="append">(处)</template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-divider content-position="left">三、20米以上高边坡</el-divider>
                    <el-row>
                      <el-col :span="12">
                        <el-form-item prop="highwayCount2">
                          <el-input v-model="statistics.highwayCount2" placeholder="请输入" @input="isButtonShow = true">
                            <template slot="prepend">高速公路</template>
                            <template slot="append">(处)</template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="roadCount2">
                          <el-input v-model="statistics.roadCount2" placeholder="请输入" @input="isButtonShow = true">
                            <template slot="prepend">普通干线公路</template>
                            <template slot="append">(处)</template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-divider content-position="left">四、高速公里排查情况</el-divider>
                    <el-row>
                      <el-col :span="12">
                        <el-form-item prop="highwayCount3">
                          <el-input v-model="statistics.highwayCount3" placeholder="请输入" disabled>
                            <template slot="prepend">投入排查小组数</template>
                            <template slot="append">(组)</template>
                          </el-input>
                        </el-form-item>
                        <el-form-item prop="highwayCount5">
                          <el-input v-model="statistics.highwayCount5" placeholder="请输入" disabled>
                            <template slot="prepend">排查规模</template>
                            <template slot="append">(km)</template>
                          </el-input>
                        </el-form-item>
                        <el-form-item prop="highwayCount7">
                          <el-input v-model="statistics.highwayCount7" placeholder="请输入" disabled>
                            <template slot="prepend">完成处置</template>
                            <template slot="append">(处)</template>
                          </el-input>
                        </el-form-item>
                        <el-form-item label="是否全面完成排查" label-width="160px">
                          <el-radio-group v-model="statistics.highwayPatrol" @change="changeData">
                            <el-radio-button
                              v-for="risk in EnumSysBooleanList"
                              :key="risk.code"
                              :label="risk.code">
                              {{ risk.name }}
                            </el-radio-button>
                          </el-radio-group>
                        </el-form-item>

                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="highwayCount4">
                          <el-input v-model="statistics.highwayCount4" placeholder="请输入" disabled>
                            <template slot="prepend">投入人力</template>
                            <template slot="append">(人次)</template>
                          </el-input>
                        </el-form-item>
                        <el-form-item prop="highwayCount6">
                          <el-input v-model="statistics.highwayCount6" placeholder="请输入" disabled>
                            <template slot="prepend">发现隐患</template>
                            <template slot="append">(处)</template>
                          </el-input>
                        </el-form-item>
                        <el-form-item prop="highwayCount8">
                          <el-input v-model="statistics.highwayCount8" placeholder="请输入" disabled>
                            <template slot="prepend">正在处置</template>
                            <template slot="append">(处)</template>
                          </el-input>
                        </el-form-item>
                        <el-form-item label="是否全面完成隐患处置" label-width="180px">
                          <el-radio-group v-model="statistics.highwayIsFinish" @change="changeData">
                            <el-radio-button disabled
                                             v-for="risk in EnumSysBooleanList"
                                             :key="risk.code"
                                             :label="risk.code">
                              {{ risk.name }}
                            </el-radio-button>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-divider content-position="left">五、普通干线公路排查情况</el-divider>
                    <el-row>
                      <el-col :span="12">
                        <el-form-item prop="roadCount3">
                          <el-input v-model="statistics.roadCount3" placeholder="请输入" disabled>
                            <template slot="prepend">投入排查小组数</template>
                            <template slot="append">(组)</template>
                          </el-input>
                        </el-form-item>
                        <el-form-item prop="roadCount5">
                          <el-input v-model="statistics.roadCount5" placeholder="请输入" disabled>
                            <template slot="prepend">排查规模</template>
                            <template slot="append">(km)</template>
                          </el-input>
                        </el-form-item>
                        <el-form-item prop="roadCount7">
                          <el-input v-model="statistics.roadCount7" placeholder="请输入" disabled>
                            <template slot="prepend">完成处置</template>
                            <template slot="append">(处)</template>
                          </el-input>
                        </el-form-item>
                        <el-form-item label="是否全面完成排查" label-width="160px">
                          <el-radio-group v-model="statistics.roadPatrol" @change="changeData">
                            <el-radio-button
                              v-for="risk in EnumSysBooleanList"
                              :key="risk.code"
                              :label="risk.code">
                              {{ risk.name }}
                            </el-radio-button>
                          </el-radio-group>
                        </el-form-item>

                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="roadCount4">
                          <el-input v-model="statistics.roadCount4" placeholder="请输入" disabled>
                            <template slot="prepend">投入人力</template>
                            <template slot="append">(人次)</template>
                          </el-input>
                        </el-form-item>
                        <el-form-item prop="roadCount6">
                          <el-input v-model="statistics.roadCount6" placeholder="请输入" disabled>
                            <template slot="prepend">发现隐患</template>
                            <template slot="append">(处)</template>
                          </el-input>
                        </el-form-item>
                        <el-form-item prop="roadCount8">
                          <el-input v-model="statistics.roadCount8" placeholder="请输入" disabled>
                            <template slot="prepend">正在处置</template>
                            <template slot="append">(处)</template>
                          </el-input>
                        </el-form-item>
                        <el-form-item label="是否全面完成隐患处置" label-width="180px">
                          <el-radio-group v-model="statistics.roadIsFinish" @change="changeData">
                            <el-radio-button disabled
                                             v-for="risk in EnumSysBooleanList"
                                             :key="risk.code"
                                             :label="risk.code">
                              {{ risk.name }}
                            </el-radio-button>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                    </el-row>

                  </el-form>
                  <el-button type="success" icon="el-icon-check" style="width: 100%" v-if="isButtonShow"
                             @click="statisticsAllAdd()">更改提交
                  </el-button>
                </el-col>

              </el-row>


            </div>
            <!--   整治列表-->
            <!--   新增巡查-->
            <el-dialog
              :close-on-click-modal="false"
              :title="dialogTitle"
              :visible.sync="isShowAddDialog"
              width="800px">
              <!-- 具体form表单 -->
              <el-form label-position="right" ref="patrol" label-suffix="：" :rules="rule" :model="patrol"
                       label-width="0px">
                <el-divider content-position="left">基本信息</el-divider>
                <div>
                  <el-form-item label="巡查单位" prop="concatUserName" label-width="100px">
                    <el-input v-model="userInfo.organizationName" disabled></el-input>
                  </el-form-item>

                  <div class="select_form_label">
                    <el-form-item label="路线类型" label-width="100px">
                      <el-radio-group v-model="patrol.roadType" @change="changeType">
                        <el-radio-button
                          v-for="type in EnumPatrolRoadTypeList"
                          :key="type.code"
                          :label="type.code">
                          {{ type.name }}
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="巡查路线" prop="roadId" label-width="100px">
                      <el-select v-model="patrol.roadId" filterable clearable placeholder="巡查路线">
                        <el-option
                          v-for="item in deptRoadList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>

                  <el-row :gutter="5">
                    <el-col :span="11">
                      <el-form-item prop="startPointBig" label="起始桩号K" label-width="100px">
                        <el-input v-model="patrol.startPointBig" placeholder="请输入起始桩号(K)" oninput ="value=value.replace(/[^\d]/g,'')">
                          <template slot="prepend"></template>
                        </el-input>
                      </el-form-item>

                    </el-col>
                    <el-col class="line" :span="1">+</el-col>
                    <el-col :span="12">
                      <el-form-item prop="startPointSmall" label-width="0px">
                        <el-input v-model="patrol.startPointSmall" placeholder="请输入起点桩号(m)" oninput ="value=value.replace(/[^\d]/g,'')">
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>


                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item prop="investigator" label="调查人" label-width="100px">
                        <el-input v-model="patrol.investigator" placeholder="请输入">
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item prop="investigateCount" label="调查人次" label-width="100px">
                        <el-input v-model="patrol.investigateCount" oninput ="value=value.replace(/[^\d]/g,'')" placeholder="请输入">
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">

                    </el-col>
                  </el-row>
                  <el-form-item label="巡查时间" prop="startTime" label-width="100px">
                    <el-date-picker style="width: 300px"
                                    v-model="patrol.startTime"
                                    type="datetime"
                                    value-format="timestamp"
                                    placeholder="选择时间">
                    </el-date-picker>
                  </el-form-item>
                </div>
              </el-form>
              <span slot="footer" class="dialog-footer">
                 <el-button @click="isShowAddDialog=false" type="info">取 消</el-button>
              <el-button type="primary" class=" common_btn-defalut" @click="validateAddForm">开始巡查</el-button>
            </span>
            </el-dialog>

            <!--   新增病害-->
            <el-dialog
              :close-on-click-modal="false"
              title="新增病害"
              :visible.sync="isShowAddDamageDialog"
              width="800px">
              <!-- 具体form表单 -->
              <el-form label-position="right" ref="damage" label-suffix="：" :rules="rule" :model="damage"
                       label-width="0px">
                <el-divider content-position="left">病害详情</el-divider>

                <div class="select_form_label">
                  <el-form-item label="发现时间" prop="time" label-width="100px">
                    <el-date-picker style="width: 300px"
                                    v-model="damage.time"
                                    type="datetime"
                                    value-format="timestamp"
                                    placeholder="选择时间">
                    </el-date-picker>
                  </el-form-item>
                  <el-row :gutter="5">
                    <el-col :span="11">
                      <el-form-item prop="startPointBig" label="桩号" label-width="100px">
                        <el-input v-model="damage.pointBig" placeholder="请输入病害桩号(K)" oninput ="value=value.replace(/[^\d]/g,'')">
                        </el-input>
                      </el-form-item>

                    </el-col>
                    <el-col class="line" :span="1">+</el-col>
                    <el-col :span="12">
                      <el-form-item prop="startPointSmall">
                        <el-input v-model="damage.pointSmall" placeholder="请输入病害桩号(m)" oninput ="value=value.replace(/[^\d]/g,'')">
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="病害方向" label-width="100px">
                    <el-radio-group v-model="damage.direction">
                      <el-radio-button
                        v-for="risk in EnumWorkPointPositionList"
                        :key="risk.code"
                        :label="risk.code">
                        {{ risk.name }}
                      </el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="病害位置" label-width="100px">
                    <el-radio-group v-model="damage.position">
                      <el-radio-button
                        v-for="risk in EnumPositionList"
                        :key="risk.code"
                        :label="risk.code">
                        {{ risk.name }}
                      </el-radio-button>
                    </el-radio-group>
                  </el-form-item>


                  <el-form-item label="病害设施" label-width="100px">
                    <el-radio-group v-model="damage.installationType" @change="changeType">
                      <el-radio-button
                        v-for="type in EnumDamageInstallationTypeList"
                        :key="type.code"
                        :label="type.code">
                        {{ type.name }}
                      </el-radio-button>
                    </el-radio-group>
                  </el-form-item>

                  <!--路基 隧道-->
                  <div v-if="damage.installationType === 1 ||damage.installationType === 3">
                    <el-form-item label="病害类型" label-width="100px">
                      <el-radio-group v-model="damage.damageRiskType" @change="changeRisk">
                        <el-radio-button
                          v-for="risk in EnumDamageRiskTypeList"
                          :key="risk.code"
                          :label="risk.code">
                          {{ risk.name }}
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="病害结果" v-if="damage.damageRiskType && damageStatusList.length > 0"
                                  label-width="100px">
                      <el-radio-group v-model="damage.damageStatus">
                        <el-radio-button
                          v-for="risk in damageStatusList"
                          :key="risk.code"
                          :label="risk.code">
                          {{ risk.name }}
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </div>

                  <!--桥梁-->
                  <div v-if="damage.installationType === 2">
                    <el-form-item label="桥梁类型" label-width="100px">
                      <el-radio-group v-model="damage.bridgeType" @change="changeBridgeType">
                        <el-radio-button
                          v-for="bridge in EnumBridgeTypeList"
                          :key="bridge.code"
                          :label="bridge.code">
                          {{ bridge.name }}
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="病害类型" label-width="100px" >
                      <el-radio-group v-model="damage.damageRiskType" @change="changeRiskType">
                        <el-radio-button
                          v-for="risk in bridgePosition"
                          :key="risk.code"
                          :label="risk.code">
                          {{ risk.name }}
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item v-if=" damageStatusList.length > 0 && damage.bridgeType !== 7" label="病害结果"
                                  label-width="100px">
                      <el-radio-group v-model="damage.damageStatus">
                        <el-radio-button
                          v-for="risk in damageStatusList"
                          :key="risk.code"
                          :label="risk.code">
                          {{ risk.name }}
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </div>

                  <el-form-item label="病害描述" prop="explanation" label-width="100px">
                    <el-input v-model="damage.explanation" type="textarea"
                              :autosize="{ minRows: 4, maxRows: 6 }"
                              placeholder="请输入病害描述"></el-input>
                  </el-form-item>

                  <el-form-item label="病害照片" prop="picList" label-width="100px">
                    <upload-img v-model="damage.picList" :limit="9" :size-limit="4"
                                ref="uploadPic"></upload-img>
                  </el-form-item>
                </div>

              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="isShowAddDamageDialog=false" type="info">取消</el-button>
                <el-button @click="submitDamage" type="success">提交并继续</el-button>
                <!--          <el-button type="primary" class=" common_btn-defalut" @click="endPatrol">结束巡查</el-button>-->
              </span>
            </el-dialog>

            <!--   补充描述-->
            <el-dialog
              :close-on-click-modal="false"
              title="补充描述"
              :visible.sync="isShowUpdateDamageDialog"
              width="800px">
              <!-- 具体form表单 -->
              <el-form label-position="right" ref="damage" label-suffix="：" :model="damage"
                       label-width="0px">

                <div class="select_form_label">
                  <el-form-item label="病害描述" prop="explanation" label-width="100px">
                    <el-input v-model="damage.explanation" type="textarea"
                              :autosize="{ minRows: 4, maxRows: 6 }"
                              placeholder="请输入病害描述"></el-input>
                  </el-form-item>
                </div>

              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="isShowAddDamageDialog=false" type="info">取消</el-button>
                <el-button @click="submitUpdateDamage" type="success">提交</el-button>
                <!--          <el-button type="primary" class=" common_btn-defalut" @click="endPatrol">结束巡查</el-button>-->
              </span>
            </el-dialog>

            <!--   结束巡查-->
            <el-dialog
              :close-on-click-modal="false"
              title="结束巡查"
              :visible.sync="isShowEndDialog"
              width="800px">
              <!-- 具体form表单 -->
              <el-form label-position="right" ref="patrol" label-suffix="：" :rules="rule" :model="patrol"
                       label-width="0px">
                <div class="head_div">
                  <el-row :gutter="5">
                    <el-col :span="8">
                      <div><span class="info_div">巡查单位：</span> {{ patrol.deptTreeName }}</div>
                      <div><span class="info_div">巡查路线：</span> {{ patrol.roadName }}</div>
                      <div><span class="info_div">巡查状态：</span>
                        <el-tag size="mini" :style="patrol.roadPatrolStatus| patrolColor" style="color: white">
                          {{ patrol.roadPatrolStatusName }}
                        </el-tag>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div><span class="info_div"> 巡查人员：</span> {{ patrol.investigator }}</div>
                      <div><span class="info_div"> 起点桩号：</span>
                        {{ 'K' + patrol.startPointBig + '+' + patrol.startPointSmall }}
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div><span class="info_div">投入人次：</span> {{ patrol.investigateCount }}</div>
                      <div><span class="info_div">巡查时间：</span> {{ patrol.createTime | formatTimer }}</div>
                    </el-col>
                  </el-row>
                  <div style="margin-bottom: 20px"></div>
                  <el-row :gutter="5">
                    <el-col :span="11">
                      <el-form-item prop="startPointBig" label="止点桩号K" label-width="100px">
                        <el-input v-model="endPatrolVo.endPointBig" placeholder="请输入止点桩号(K)" oninput ="value=value.replace(/[^\d]/g,'')">
                        </el-input>
                      </el-form-item>

                    </el-col>
                    <el-col class="line" :span="1">+</el-col>
                    <el-col :span="12">
                      <el-form-item prop="startPointSmall">
                        <el-input v-model="endPatrolVo.endPointSmall" placeholder="请输入止点桩号(m)" oninput ="value=value.replace(/[^\d]/g,'')">
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="结束时间" prop="endTime" label-width="100px">
                    <el-date-picker style="width: 300px"
                                    v-model="endPatrolVo.endTime"
                                    type="datetime"
                                    value-format="timestamp"
                                    placeholder="选择时间">
                    </el-date-picker>
                  </el-form-item>
                </div>
              </el-form>
              <span slot="footer" class="dialog-footer">
                 <el-button @click="isShowEndDialog=false" type="info">取 消</el-button>
              <el-button type="primary" class=" common_btn-defalut" @click="submitEnd">确定</el-button>
            </span>
            </el-dialog>
            <!--   整治病害-->
            <el-dialog
              :close-on-click-modal="false"
              title="病害整治"
              :visible.sync="isShowRepairDialog"
              width="1000px">
              <!-- 具体form表单 -->
              <el-form label-position="right" ref="patrol" label-suffix="：" :rules="rule" :model="patrol"
                       label-width="0px">
                <div class="head_div">
                  <el-row :gutter="5">
                    <el-col>
                      <div><span class="info_div">巡查单位：</span> {{ repairVo.deptTreeName }}</div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col :span="12">
                      <div><span class="info_div">巡查路线：</span> {{ repairVo.roadName }}</div>
                    </el-col>
                    <el-col :span="12">
                      <div><span class="info_div">发现病害时间：</span> {{ repairVo.createTime | formatTimer }}</div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col :span="8">
                      <div><span class="info_div"> 病害桩号：</span>
                        {{ 'K' + repairVo.pointBig + '+' + repairVo.pointSmall + 'm' }}
                      </div>
                      <div><span class="info_div"> 病害设施：</span>{{ repairVo.installationTypeName }}</div>
                    </el-col>
                    <el-col :span="8">
                      <div><span class="info_div">病害方位：</span> {{ repairVo.directionName }}</div>
                      <div><span class="info_div">病害类型：</span> {{ repairVo.damageRiskTypeName }}</div>
                    </el-col>
                    <el-col :span="8">
                      <div><span class="info_div"> 病害位置：</span>{{ repairVo.positionName }}</div>
                    </el-col>
                  </el-row>
                  <div style="margin-bottom: 20px"></div>
                  <div class="select_form_label">
                    <el-collapse v-model="activeNames">
                      <el-collapse-item title="处置状态" name="1">
                        <el-form-item label="状态" label-width="80px">
                          <el-radio-group v-model="repairVo.handleStatus">
                            <el-radio-button
                              v-for="type in EnumPatrolHandleStatusList"
                              :key="type.code"
                              :disabled="type.code < handleStatus"
                              :label="type.code">
                              {{ type.name }}
                            </el-radio-button>
                          </el-radio-group>
                        </el-form-item>
                        <div v-if="repairVo.handleStatus > 1">
                          <el-form-item label="处置时间" prop="handleStatusTime" label-width="120px">
                            <el-date-picker
                              v-model="repairVo.handleStatusTime"
                              type="datetime"
                              placeholder="选择日期时间">
                            </el-date-picker>
                          </el-form-item>
                          <el-form-item label="处置说明" prop="explanation" label-width="100px">
                            <el-input v-model="repairVo.handleStatusExplanation" type="textarea"
                                      :autosize="{ minRows: 2, maxRows: 3 }"
                                      placeholder="请输入处置说明"></el-input>
                          </el-form-item>
                          <el-form-item label="处置照片" prop="picList" label-width="100px">
                            <upload-img v-model="repairVo.handleStatusPic" :limit="9" :size-limit="4"
                                        ref="uploadPic"></upload-img>
                          </el-form-item>
                        </div>
                      </el-collapse-item>

                      <el-collapse-item title="警示牌" name="2">
                        <el-form-item label="是否树立警示牌" label-width="150px">
                          <el-radio-group v-model="repairVo.jingShiPai">
                            <el-radio-button
                              v-for="type in EnumSysBooleanList"
                              :key="type.code"
                              :label="type.code">
                              {{ type.name }}
                            </el-radio-button>
                          </el-radio-group>
                        </el-form-item>

                        <div v-if="repairVo.jingShiPai === 1">
                          <el-form-item label="警示牌时间" prop="jingShiPaiTime" label-width="120px">
                            <el-date-picker
                              v-model="repairVo.jingShiPaiTime"
                              type="datetime"
                              placeholder="选择日期时间">
                            </el-date-picker>
                          </el-form-item>

                          <el-form-item label="警示牌照片" prop="jingShiPaiPic" label-width="120px">
                            <upload-img v-model="repairVo.jingShiPaiPic" :limit="9" :size-limit="4"
                                        ref="uploadPic"></upload-img>
                          </el-form-item>
                        </div>

                      </el-collapse-item>
                      <el-collapse-item title="监测状态" name="3">
                        <el-form-item label="状态" label-width="150px">
                          <el-radio-group v-model="repairVo.monitorStatus">
                            <el-radio-button
                              v-for="type in EnumMonitorStatusList"
                              :key="type.code"
                              :label="type.code"
                              :disabled="type.code < monitorStatus">
                              {{ type.name }}
                            </el-radio-button>
                          </el-radio-group>
                        </el-form-item>
                        <div v-if="repairVo.monitorStatus > 1">
                          <el-form-item label="监测时间" prop="monitorStatusTime" label-width="120px">
                            <el-date-picker
                              v-model="repairVo.monitorStatusTime"
                              type="datetime"
                              placeholder="选择日期时间">
                            </el-date-picker>
                          </el-form-item>
                          <el-form-item label="监测说明" prop="monitorStatusExplanation" label-width="100px">
                            <el-input v-model="repairVo.monitorStatusExplanation" type="textarea"
                                      :autosize="{ minRows: 2, maxRows: 3 }"
                                      placeholder="请输入监测说明"></el-input>
                          </el-form-item>
                          <el-form-item label="监测照片" prop="monitorStatusPic" label-width="100px">
                            <upload-img v-model="repairVo.monitorStatusPic" :limit="9" :size-limit="4"
                                        ref="uploadPic"></upload-img>
                          </el-form-item>
                        </div>
                      </el-collapse-item>

                      <el-collapse-item title="临时管控" name="4">
                        <el-form-item label="是否有临时管控措施" label-width="180px">
                          <el-radio-group v-model="repairVo.controlStatus">
                            <el-radio-button
                              v-for="type in EnumSysBooleanList"
                              :key="type.code"
                              :label="type.code">
                              {{ type.name }}
                            </el-radio-button>
                          </el-radio-group>
                        </el-form-item>
                        <div v-if="repairVo.controlStatus === 1">
                          <el-form-item label="管控措施时间" prop="controlStatusTime" label-width="120px">
                            <el-date-picker
                              v-model="repairVo.controlStatusTime"
                              type="datetime"
                              placeholder="选择日期时间">
                            </el-date-picker>
                          </el-form-item>

                          <el-form-item label="措施描述" prop="controlStatusExplanation" label-width="100px">
                            <el-input v-model="repairVo.controlStatusExplanation" type="textarea"
                                      :autosize="{ minRows: 2, maxRows: 3 }"
                                      placeholder="请输入措施描述"></el-input>
                          </el-form-item>
                          <el-form-item label="管控措施照片" prop="controlStatusPic" label-width="150px">
                            <upload-img v-model="repairVo.controlStatusPic" :limit="9" :size-limit="4"
                                        ref="uploadPic"></upload-img>
                          </el-form-item>
                        </div>
                      </el-collapse-item>
                    </el-collapse>

                  </div>
                </div>
              </el-form>
              <span slot="footer" class="dialog-footer">
                 <el-button @click="isShowRepairDialog=false" type="info">取 消</el-button>
              <el-button type="primary" class=" common_btn-defalut" @click="submitRepair">确定</el-button>
            </span>
            </el-dialog>
            <!-- 巡查时间线 -->
            <el-drawer
              title="巡查记录"
              :visible.sync="isShowDetailDialog"
              direction="rtl"
              custom-class="demo-drawer"
              ref="drawer"
              size="40%">
              <div class="demo-drawer__content time_line">
                <el-timeline style="height: 800px;overflow: auto">
                  <el-timeline-item
                    v-for="(item, index) in timelineData"
                    :key="index"
                    color="#0bbd87"
                    :timestamp="item.createTime | formatTimer"
                    placement="top">
                    <el-card>
                      <div class="time_line_div">
                        <div><span>巡查状态：</span>{{ item.status }}</div>
                        <div><span>巡查描述：</span>{{ item.explanation }}</div>
                      </div>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>

            </el-drawer>
            <!-- 病害处置时间线 -->
            <el-drawer
              title="处置记录"
              :visible.sync="isShowDamageDetailDialog"
              direction="rtl"
              custom-class="demo-drawer"
              ref="drawer"
              size="50%">
              <div class="demo-drawer__content time_line">
                <el-radio-group v-model="radio2">
                  <el-radio-button label="病害信息"></el-radio-button>
                  <el-radio-button label="处置时间线"></el-radio-button>
                </el-radio-group>

                <div v-if="radio2=== '病害信息'">
                  <el-divider content-position="left"></el-divider>
                  <div class="head_div">
                    <el-row :gutter="5">
                      <el-col>
                        <div><span class="info_div">巡查单位：</span> {{ repairVo.deptTreeName }}</div>
                      </el-col>
                    </el-row>
                    <el-row :gutter="5">
                      <el-col :span="10">
                        <div><span class="info_div">巡查路线：</span> {{ repairVo.roadName }}</div>
                      </el-col>
                      <el-col :span="10">
                        <div><span class="info_div">巡查时间：</span> {{ repairVo.createTime | formatTimer }}</div>
                      </el-col>
                    </el-row>
                    <el-row :gutter="5">
                      <el-col :span="10">
                        <div><span class="info_div"> 病害桩号：</span>
                          {{ 'K' + repairVo.pointBig + '+' + repairVo.pointSmall + 'm' }}
                        </div>
                        <div><span class="info_div">处置状态：</span>
                          <el-tag size="mini" :style="repairVo.handleStatus| gradeColor" style="color: white">
                            {{ repairVo.handleStatusName }}
                          </el-tag>
                        </div>
                        <div><span class="info_div"> 病害设施：</span>{{ repairVo.installationTypeName }}</div>
                      </el-col>
                      <el-col :span="6">
                        <div><span class="info_div">病害方位：</span> {{ repairVo.directionName }}</div>
                        <div><span class="info_div">监测状态：</span>
                          <el-tag size="mini" :style="repairVo.monitorStatus| gradeColor"
                                  style="color: white">
                            {{ repairVo.monitorStatusName }}
                          </el-tag>
                        </div>
                        <div><span class="info_div">病害类型：</span> {{ repairVo.damageRiskTypeName }}</div>
                      </el-col>
                      <el-col :span="8">
                        <div><span class="info_div"> 病害位置：</span>{{ repairVo.positionName }}</div>
                        <div><span class="info_div">树立警示牌：</span>
                          <el-tag size="mini" :style="repairVo.jingShiPai| gradeColor2"
                                  style="color: white">
                            {{ repairVo.jingShiPaiName }}
                          </el-tag>
                        </div>
                        <div v-if="repairVo.installationType === 2"><span class="info_div">桥梁类型：</span> {{ repairVo.bridgeTypeName }}</div>
                      </el-col>
                    </el-row>
                    <el-row :gutter="5">
                      <el-col>
                        <div><span class="info_div">病害说明：</span> {{ repairVo.explanation }}</div>
                      </el-col>
                    </el-row>
                  </div>
                  <el-divider content-position="left"></el-divider>
                  <el-carousel height="300px">
                    <el-carousel-item v-for="(item) in repairVo.picList" :key="item">
                      <el-image style="width: 100%; height: 100%;" :src="constUrl+item"></el-image>
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div v-if="radio2=== '处置时间线'">
                  <el-divider content-position="left"></el-divider>
                  <el-timeline style="height: 800px;overflow: auto">
                    <el-timeline-item
                      v-for="(item, index) in timelineData"
                      :key="index"
                      color="#0bbd87"
                      :timestamp="item.updateTime | formatTimer"
                      placement="top">
                      <el-card>
                        <div class="time_line_div">
                          <div><span>状态：</span>{{ item.status }}</div>
                          <div><span>描述：</span>{{ item.explanation }}</div>
                          <div><span>图片：</span></div>
                          <div>
                            <el-image v-for="(pic) in item.picList" :key="pic" style="width: 100px; height: 100px;"
                                      :src="constUrl+pic" @click="previewImg(constUrl + pic)"></el-image>
                          </div>
                        </div>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
                </div>
              </div>

            </el-drawer>
            <picture-viewer ref="imageViewer"></picture-viewer>
          </div>
          <x-loading v-show="isLoading"></x-loading>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import OrganizationTree from '@/components/organization-tree/all'
  import UploadImg from '@/components/upload-img'
  import {
    addDamagePatrol,
    addPatrol,
    endPatrol,
    deletePatrol,
    getDamagePatrolList,
    getPatorlList,
    handleDamageTimeline,
    queryByRoadPatrol,
    queryTimeline,
    repairDamage,
    statisticsAll,
    statisticsAllAdd,
    updateDamagePatrol,
    deleteDamagePatrol
  } from '@/services/patrol'
  import constUrl from '@/services/env'
  import Format from '@/utils/format'
  import XLoading from '@/components/animation/x-loading.vue'
  import {getRoadSelectList} from '@/services/model/road-mgmt'
  import Enums from '@/utils/enums'
  import PictureViewer from '@/components/picture-viewer'
  // form表单校验规则
  export default {
    components: {XLoading, UploadImg, PictureViewer,OrganizationTree},
    mixins: [Enums],
    data() {
      return {
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
        constUrl,
        activeNames: '1',
        statistics: {},
        pickerOptions: {
          shortcuts: [
            {
              text: '最近24小时',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              }
            }
            , {
              text: '最近一年',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
                picker.$emit('pick', [start, end])
              }
            }
          ],
          onPick: obj => {
            this.picerMinDate = new Date(obj.minDate).getTime()
          },
          disabledDate: time => {
            if (this.picerMinDate) {
              // 最多可选3个月
              const LIMIT = 90 * 24 * 60 * 60 * 1000
              const maxTime = this.picerMinDate + LIMIT
              const minTime = this.picerMinDate - LIMIT
              return time.getTime() > maxTime || time.getTime() < minTime
            }
          }
        },
        timerArray: [],
        timerArray2: [],
        isLook: false,
        isButtonShow: false,
        loading: true,
        isShowEndDialog: false,
        isShowDetailDialog: false,
        isShowDamageDetailDialog: false,
        left_col: 24,
        right_col: 0,
        radio: '巡查列表',
        radio2: '病害信息',
        timelineData: [],
        EnumRoadPatrolStatusList: [],
        form: {
          page: 1,
          pageSize: 10,
          queryString: '',
          total: 0,
        },
        endPatrolVo: {
          endPointBig: '',
          endPointSmall: '',
        },
        deptRoadList: [],
        EnumDamageRiskType1List: [],
        EnumDamageRiskType2List: [],
        EnumDamageRiskType3List: [],
        EnumDamageRiskType27List: [],
        EnumDamageRiskTypeList: [],
        EnumDamageInstallationTypeList: [],
        EnumPositionList: [],
        EnumBridgeTypeList: [],
        EnumWorkPointPositionList: [],
        bridgePosition: [],
        damageStatusList: [],
        //桥梁病害位置选项1
        bridgePosition1: [
          {
            code: 1,
            name: '桥面系'
          },
          {
            code: 2,
            name: '上部结构'
          },
          {
            code: 3,
            name: '下部结构'
          }, {
            code: 4,
            name: '支座'
          }, {
            code: 5,
            name: '附属设施'
          }, {
            code: 6,
            name: '调治构造物'
          }, {
            code: 7,
            name: '其他'
          }
        ],
        //桥梁病害位置选项2
        bridgePosition2: [
          {
            code: 1,
            name: '桥面系'
          },
          {
            code: 2,
            name: '上部结构'
          },
          {
            code: 3,
            name: '下部结构'
          }, {
            code: 5,
            name: '附属设施'
          }, {
            code: 6,
            name: '调治构造物'
          }, {
            code: 7,
            name: '其他'
          }
        ],
        //路基病害结果
        damageStatusLjList: [//路基
          {
            risk: 1,//路肩病害
            damage: [//病害结果
              {
                code: 111,
                name: '路肩或路缘石缺损'
              },
              {
                code: 112,
                name: '阻挡路面排水'
              },
              {
                code: 113,
                name: '路肩不洁'
              },
            ]
          },
          {
            risk: 2,//路堤与路床病害
            damage: [//病害结果
              {
                code: 121,
                name: '杂物堆积'
              },
              {
                code: 122,
                name: '不均匀沉降'
              },
              {
                code: 123,
                name: '开裂滑移'
              },
            ]
          },
          {
            risk: 3,//边坡病害
            damage: [//病害结果
              {
                code: 131,
                name: '坡面冲刷'
              },
              {
                code: 132,
                name: '碎落崩塌'
              },
              {
                code: 133,
                name: '局部坍塌'
              }, {
                code: 134,
                name: '滑坡'
              },
            ]
          },
          {
            risk: 4,//既有支挡结构物病害
            damage: [//病害结果
              {
                code: 141,
                name: '表观破损'
              },
              {
                code: 142,
                name: '排（泄）水孔淤塞'
              },
              {
                code: 143,
                name: '局部损坏'
              }, {
                code: 144,
                name: '结构失稳'
              },
            ]
          },
          {
            risk: 5,//排水设施病害
            damage: [//病害结果
              {
                code: 151,
                name: '排水设施堵塞'
              },
              {
                code: 152,
                name: '排水设施损坏'
              },
              {
                code: 153,
                name: '排水设施不完善'
              }
            ]
          },
        ],
        //桥梁（含涵洞） - 梁式桥 病害结果1
        damageStatusQlLsqList: [//桥梁（含涵洞）2
          {
            risk: 1,//桥面系
            damage: [//病害结果
              {
                code: 2111,
                name: '桥面铺装'
              },
              {
                code: 2112,
                name: '伸缩装置'
              },
              {
                code: 2113,
                name: '排水系统'
              },
              {
                code: 2114,
                name: '人行道'
              },
              {
                code: 2115,
                name: '栏杆、护栏'
              },
              {
                code: 2116,
                name: '照明、标志'
              },
              {
                code: 2117,
                name: '桥路连接处'
              },
            ]
          },
          {
            risk: 2,//上部结构
            damage: [//病害结果
              {
                code: 2121,
                name: '主要承重构件'
              },
              {
                code: 2122,
                name: '一般构件'
              }
            ]
          },
          {
            risk: 3,//下部结构
            damage: [//病害结果
              {
                code: 2131,
                name: '桥墩及基础'
              },
              {
                code: 2132,
                name: '桥台及基础'
              },
              {
                code: 2133,
                name: '翼墙、耳墙'
              },
              {
                code: 2134,
                name: '锥坡、护坡'
              }
            ]
          },
          {
            risk: 4,//支座
            damage: [//病害结果
            ]
          },
          {
            risk: 5,//附属设施
            damage: [//病害结果
              {
                code: 2151,
                name: '防撞设施'
              },
              {
                code: 2152,
                name: '防雷设施'
              },
              {
                code: 2153,
                name: '防抛网、声屏障'
              },
              {
                code: 2154,
                name: '检修设施'
              },
              {
                code: 2155,
                name: '监测系统、永久观测点'
              }
            ]
          },
          {
            risk: 6,//调治构造物
            damage: [//病害结果
            ]
          },
          {
            risk: 7,//其他
            damage: [//病害结果
            ]
          },
        ],
        //桥梁（含涵洞） - 板拱桥、肋拱桥、箱型拱桥、双曲拱桥 病害结果2
        damageStatusQlBgqList: [//桥梁（含涵洞）2
          {
            risk: 1,//桥面系
            damage: [//病害结果
              {
                code: 2211,
                name: '桥面铺装'
              },
              {
                code: 2212,
                name: '伸缩装置'
              },
              {
                code: 2213,
                name: '排水系统'
              },
              {
                code: 2214,
                name: '人行道'
              },
              {
                code: 2215,
                name: '栏杆、护栏'
              },
              {
                code: 2216,
                name: '照明、标志'
              },
              {
                code: 2217,
                name: '桥路连接处'
              },
            ]
          },
          {
            risk: 2,//上部结构
            damage: [//病害结果
              {
                code: 2221,
                name: '主拱圈'
              },
              {
                code: 2222,
                name: '拱上结构'
              },
              {
                code: 2223,
                name: '桥面板'
              }
            ]
          },
          {
            risk: 3,//下部结构
            damage: [//病害结果
              {
                code: 2231,
                name: '桥墩及基础'
              },
              {
                code: 2232,
                name: '桥台及基础'
              },
              {
                code: 2233,
                name: '翼墙、耳墙'
              },
              {
                code: 2234,
                name: '锥坡、护坡'
              }
            ]
          },
          {
            risk: 5,//附属设施
            damage: [//病害结果
              {
                code: 2251,
                name: '防撞设施'
              },
              {
                code: 2252,
                name: '防雷设施'
              },
              {
                code: 2253,
                name: '防抛网、声屏障'
              },
              {
                code: 2254,
                name: '检修设施'
              },
              {
                code: 2255,
                name: '监测系统、永久观测点'
              }
            ]
          },
          {
            risk: 6,//调治构造物
            damage: [//病害结果
            ]
          },
          {
            risk: 7,//其他
            damage: [//病害结果
            ]
          },
        ],
        //桥梁（含涵洞） - 刚架拱桥、桁架拱桥 病害结果3
        damageStatusQlGjgList: [//桥梁（含涵洞）2
          {
            risk: 1,//桥面系
            damage: [//病害结果
              {
                code: 2311,
                name: '桥面铺装'
              },
              {
                code: 2312,
                name: '伸缩装置'
              },
              {
                code: 2313,
                name: '排水系统'
              },
              {
                code: 2314,
                name: '人行道'
              },
              {
                code: 2315,
                name: '栏杆、护栏'
              },
              {
                code: 2316,
                name: '照明、标志'
              },
              {
                code: 2317,
                name: '桥路连接处'
              },
            ]
          },
          {
            risk: 2,//上部结构
            damage: [//病害结果
              {
                code: 2321,
                name: '拱片'
              },
              {
                code: 2322,
                name: '横向联结系'
              },
              {
                code: 2323,
                name: '桥面板'
              }
            ]
          },
          {
            risk: 3,//下部结构
            damage: [//病害结果
              {
                code: 2331,
                name: '桥墩及基础'
              },
              {
                code: 2332,
                name: '桥台及基础'
              },
              {
                code: 2333,
                name: '翼墙、耳墙'
              },
              {
                code: 2334,
                name: '锥坡、护坡'
              }
            ]
          },
          {
            risk: 5,//附属设施
            damage: [//病害结果
              {
                code: 2351,
                name: '防撞设施'
              },
              {
                code: 2352,
                name: '防雷设施'
              },
              {
                code: 2353,
                name: '防抛网、声屏障'
              },
              {
                code: 2354,
                name: '检修设施'
              },
              {
                code: 2355,
                name: '监测系统、永久观测点'
              }
            ]
          },
          {
            risk: 6,//调治构造物
            damage: [//病害结果
            ]
          },
          {
            risk: 7,//其他
            damage: [//病害结果
            ]
          },
        ],
        //桥梁（含涵洞） - 钢-混凝土组合拱桥 病害结果4
        damageStatusQlHltList: [//桥梁（含涵洞）2
          {
            risk: 1,//桥面系
            damage: [//病害结果
              {
                code: 2411,
                name: '桥面铺装'
              },
              {
                code: 2412,
                name: '伸缩装置'
              },
              {
                code: 2413,
                name: '排水系统'
              },
              {
                code: 2414,
                name: '人行道'
              },
              {
                code: 2415,
                name: '栏杆、护栏'
              },
              {
                code: 2416,
                name: '照明、标志'
              },
              {
                code: 2417,
                name: '桥路连接处'
              },
            ]
          },
          {
            risk: 2,//上部结构
            damage: [//病害结果
              {
                code: 2421,
                name: '拱肋'
              },
              {
                code: 2422,
                name: '横向联结系'
              },
              {
                code: 2423,
                name: '吊杆'
              },
              {
                code: 2424,
                name: '立柱'
              },
              {
                code: 2425,
                name: '系杆'
              },
              {
                code: 2426,
                name: '桥面板'
              },
              {
                code: 2427,
                name: '支座'
              }
            ]
          },
          {
            risk: 3,//下部结构
            damage: [//病害结果
              {
                code: 2431,
                name: '桥墩及基础'
              },
              {
                code: 2432,
                name: '桥台及基础'
              },
              {
                code: 2433,
                name: '翼墙、耳墙'
              },
              {
                code: 2434,
                name: '锥坡、护坡'
              }
            ]
          },
          {
            risk: 5,//附属设施
            damage: [//病害结果
              {
                code: 2451,
                name: '防撞设施'
              },
              {
                code: 2452,
                name: '防雷设施'
              },
              {
                code: 2453,
                name: '防抛网、声屏障'
              },
              {
                code: 2454,
                name: '检修设施'
              },
              {
                code: 2455,
                name: '监测系统、永久观测点'
              }
            ]
          },
          {
            risk: 6,//调治构造物
            damage: [//病害结果
            ]
          },
          {
            risk: 7,//其他
            damage: [//病害结果
            ]
          },
        ],
        //桥梁（含涵洞） - 斜拉桥 病害结果5
        damageStatusQlXlqList: [//桥梁（含涵洞）2
          {
            risk: 1,//桥面系
            damage: [//病害结果
              {
                code: 2511,
                name: '桥面铺装'
              },
              {
                code: 2512,
                name: '伸缩装置'
              },
              {
                code: 2513,
                name: '排水系统'
              },
              {
                code: 2514,
                name: '人行道'
              },
              {
                code: 2515,
                name: '栏杆、护栏'
              },
              {
                code: 2516,
                name: '照明、标志'
              },
              {
                code: 2517,
                name: '桥路连接处'
              },
            ]
          },
          {
            risk: 2,//上部结构
            damage: [//病害结果
              {
                code: 2521,
                name: '主梁'
              },
              {
                code: 2522,
                name: '斜拉锚索系统（斜拉索、锚具、拉索护套、减振装置等）'
              },
              {
                code: 2523,
                name: '索塔'
              },
              {
                code: 2524,
                name: '支座'
              }
            ]
          },
          {
            risk: 3,//下部结构
            damage: [//病害结果
              {
                code: 2531,
                name: '桥墩及基础'
              },
              {
                code: 2532,
                name: '桥台及基础'
              },
              {
                code: 2533,
                name: '翼墙、耳墙'
              },
              {
                code: 2534,
                name: '锥坡、护坡'
              }
            ]
          },
          {
            risk: 4,//支座
            damage: [],
          },
          {
            risk: 5,//附属设施
            damage: [//病害结果
              {
                code: 2551,
                name: '防撞设施'
              },
              {
                code: 2552,
                name: '防雷设施'
              },
              {
                code: 2553,
                name: '防抛网、声屏障'
              },
              {
                code: 2554,
                name: '检修设施'
              },
              {
                code: 2555,
                name: '监测系统、永久观测点'
              }
            ]
          },
          {
            risk: 6,//调治构造物
            damage: [//病害结果
            ]
          },
          {
            risk: 7,//其他
            damage: [//病害结果
            ]
          },
        ],
        //桥梁（含涵洞） - 悬索桥 病害结果6
        damageStatusQlXsqList: [//桥梁（含涵洞）2
          {
            risk: 1,//桥面系
            damage: [//病害结果
              {
                code: 2611,
                name: '桥面铺装'
              },
              {
                code: 2612,
                name: '伸缩装置'
              },
              {
                code: 2613,
                name: '排水系统'
              },
              {
                code: 2614,
                name: '人行道'
              },
              {
                code: 2615,
                name: '栏杆、护栏'
              },
              {
                code: 2616,
                name: '照明、标志'
              },
              {
                code: 2617,
                name: '桥路连接处'
              },
            ]
          },
          {
            risk: 2,//上部结构
            damage: [//病害结果
              {
                code: 2621,
                name: '加劲梁'
              },
              {
                code: 2622,
                name: '索塔'
              },
              {
                code: 2623,
                name: '主缆'
              },
              {
                code: 2624,
                name: '索鞍'
              },
              {
                code: 2625,
                name: '索夹'
              },
              {
                code: 2627,
                name: '吊杆系统（吊杆、锚具、护套）'
              }
            ]
          },
          {
            risk: 3,//下部结构
            damage: [//病害结果
              {
                code: 2631,
                name: '锚碇'
              },
              {
                code: 2632,
                name: '墩身及基础'
              },
              {
                code: 2633,
                name: '散索鞍'
              },
              {
                code: 2634,
                name: '锚杆'
              },
              {
                code: 2635,
                name: '桥墩及基础'
              },
              {
                code: 2636,
                name: '桥台及基础'
              },
              {
                code: 2637,
                name: '翼墙、耳墙'
              },
              {
                code: 2638,
                name: '锥坡、护坡'
              }
            ]
          },
          {
            risk: 5,//附属设施
            damage: [//病害结果
              {
                code: 2651,
                name: '防撞设施'
              },
              {
                code: 2652,
                name: '防雷设施'
              },
              {
                code: 2653,
                name: '防抛网、声屏障'
              },
              {
                code: 2654,
                name: '检修设施'
              },
              {
                code: 2655,
                name: '监测系统、永久观测点'
              }
            ]
          },
          {
            risk: 6,//调治构造物
            damage: [//病害结果
            ]
          },
          {
            risk: 7,//其他
            damage: [//病害结果
            ]
          },
        ],
        //隧道病害结果3
        damageStatusSdList: [//隧道
          {
            risk: 1,//洞口
            damage: [//病害结果
              {
                code: 311,
                name: '边（仰）坡有无危石、积水、积雪'
              },
              {
                code: 312,
                name: '洞口有无挂冰'
              },
              {
                code: 313,
                name: '边沟有无淤塞'
              },
              {
                code: 314,
                name: '沟造物有无开裂、倾斜、沉陷'
              },
            ]
          },
          {
            risk: 2,//衬砌
            damage: [//病害结果
              {
                code: 321,
                name: '结构开裂、倾斜、沉陷、错台、起层、剥落'
              },
              {
                code: 322,
                name: '渗漏水（挂冰）'
              }
            ]
          },
          {
            risk: 3,//洞门
            damage: [//病害结果
              {
                code: 331,
                name: '结构裂缝、错台、起层、剥落'
              },
              {
                code: 332,
                name: '渗漏水'
              },
              {
                code: 333,
                name: '挂冰、冰柱'
              }
            ]
          },
          {
            risk: 4,//路面
            damage: [//病害结果
              {
                code: 341,
                name: '落物、油污'
              },
              {
                code: 342,
                name: '滞水或结冰'
              },
              {
                code: 343,
                name: '路面拱起、坑槽、开裂、错台'
              }
            ]
          },
          {
            risk: 5,//检修道
            damage: [//病害结果
              {
                code: 351,
                name: '结构破损'
              },
              {
                code: 352,
                name: '盖板缺损'
              },
              {
                code: 353,
                name: '栏杆变形、损坏'
              }
            ]
          },
          {
            risk: 6,//排水设施
            damage: [//病害结果
              {
                code: 361,
                name: '缺损、堵塞、积水、结冰'
              }
            ]
          },
          {
            risk: 7,//吊顶及各种预埋件
            damage: [//病害结果
              {
                code: 371,
                name: '缺损、堵塞、积水、结冰'
              }
            ]
          }, {
            risk: 8,//内装饰
            damage: [//病害结果
              {
                code: 381,
                name: '脏污、变形、缺损'
              }
            ]
          },
          {
            risk: 9,//标志、标线、轮廓标
            mes: '是否完好',
            damage: [//病害结果
              {
                code: 391,
                name: '是'
              },
              {
                code: 392,
                name: '否'
              }
            ]
          },
        ],
        rule: {
          name: {required: true, message: '请输入公司名称'},
        },
        patrol: {
          investigator: '',
          roadId: '',
          startPointBig: '',
          endPointBig: '',
          startPointSmall: '',
          endPointSmall: '',
          investigateCount: ''
        },
        damage: {
          damageRiskType: '',
          installationType: '',
          bridgeType: '',
          damageStatus: '',
          roadType: '',
          explanation: '',
          picList: []
        },
        tableList: [],
        EnumMonitorStatusList: [],
        EnumPatrolHandleStatusList: [],
        EnumSysBooleanList: [],
        EnumPatrolRoadTypeList: [],
        isShowAddDialog: false,
        isShowAddDamageDialog: false,
        isShowUpdateDamageDialog: false,
        isLoading: false,
        isShowRepairDialog: false,
        handleStatus: 0,
        monitorStatus: 0,
        repairVo: {
          handleStatus: '',
          jingShiPai: '',
          monitorStatus: '',
          jingShiPaiTime: '',
          controlStatus: 2,
        }
      }
    },
    filters: {
      formatTimer(timer) {
        if (timer) {
          return Format(new Date(timer), 'yyyy-MM-dd hh:mm:ss')
        }
        return ''
      },
      gradeColor(val) {
        switch (val) {
          case 1:
            return 'background-color:#e43321'
          case 2:
            return 'background-color:#f39c12'
          case 3:
            return 'background-color:#0DC26B'
          default:
            return 'background-color:#0DC26B'
        }
      },
      gradeColor2(val) {
        switch (val) {
          case 0:
            return 'background-color:#e43321'
          case 1:
            return 'background-color:#0DC26B'
          default:
            return 'background-color:#0DC26B'
        }
      },
      patrolColor(val) {
        switch (val) {
          case 1:
            return 'background-color:#f39c12'
          case 2:
            return 'background-color:#0DC26B'
          default:
            return 'background-color:#0DC26B'
        }
      },
    },
    computed: {
      // 弹窗的title
      dialogTitle() {
        return this.patrol.id ? '编辑巡查记录' : '添加巡查记录'
      },
      userInfo() {
        return this.$store.state.userInfo;
      },
    },
    methods: {
      selectOrgHandel() {
        this.$forceUpdate()
        this.form.deptTreeId = this.deptTree.deptTreeId
        this.queryList()
        this.changeDept()
      },
      changeData() {
        this.isButtonShow = true
      },
      //更改统计信息
      async statisticsAllAdd() {
        let res = await statisticsAllAdd(this.statistics)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '成功！'
          })
        }
        this.isButtonShow = false
      },
      //查询更改信息
      async statisticsAll() {
        let form = {}
        let timerArray = this.timerArray2 || []
        form.startCreateTime = timerArray[0] || null;
        form.endCreateTime = timerArray[1] || null;
        let {data} = await statisticsAll(form)
        this.statistics = data
        this.statistics.roadCount5 = this.statistics.roadCount5 / 1000
        this.statistics.highwayCount5 = this.statistics.highwayCount5 / 1000
        this.isLoading = false
      },
      changeRadio() {
        this.form = {
          page: 1,
          pageSize: 10,
          queryString: '',
          total: 0,
          deptTreeId:this.deptTree.deptTreeId
        }
        this.queryList()
      },
      //更改病害设施，展示不同的病害位置
      changeType(type) {
        //路基病害
        this.$set(this.damage, "damageRiskType", 1);
        if (type === 1) {
          this.EnumDamageRiskTypeList = this.EnumDamageRiskType1List
          this.changeRisk(1)
          //桥梁病害（隧道）
        } else if (type === 2) {
          this.$set(this.damage, "bridgeType", 1);
          this.EnumDamageRiskTypeList = this.damageStatusQlLsqList
          this.bridgePosition = this.bridgePosition1
          this.changeRiskType(1)
        } else if (type === 3) {
          this.changeRisk(1)
          this.EnumDamageRiskTypeList = this.EnumDamageRiskType3List
        }
      },
      //根据桥梁类型展示不同的病害位置选项
      changeBridgeType(bridgeType) {
        let bridgePosition = []
        if (bridgeType === 1 || bridgeType === 5) {
          bridgePosition = this.bridgePosition1
        } else {
          bridgePosition = this.bridgePosition2
        }
        this.$set(this, "bridgePosition", bridgePosition);
        this.$set(this.damage, "damageStatus", '');
        this.$set(this.damage, "damageRiskType", '');

        if (bridgeType === 7) {
          this.$set(this, "bridgePosition", this.EnumDamageRiskType27List);
          this.$set(this, "damageStatus", '');
        }

      },
      //不同桥梁位置选择病害位置，展示不同的病害结果
      changeRiskType(risk) {
        let damageStatusList = []
        let list = []
        //路基病害结果选项
        if (this.damage.bridgeType === 1) {
          list = this.damageStatusQlLsqList
        } else if (this.damage.bridgeType === 2) {
          list = this.damageStatusQlBgqList
        } else if (this.damage.bridgeType === 3) {
          list = this.damageStatusQlGjgList
        } else if (this.damage.bridgeType === 4) {
          list = this.damageStatusQlHltList
        } else if (this.damage.bridgeType === 5) {
          list = this.damageStatusQlXlqList
        } else if (this.damage.bridgeType === 6) {
          list = this.damageStatusQlXsqList
        }
        list.map(x => {
          if (x.risk === risk) {
            damageStatusList = x.damage
          }
        })
        this.$set(this, "damageStatusList", damageStatusList);
        this.$set(this, "damageStatus", '');
      },
      changeRisk(risk) {
        let damageStatusList = []
        let list = []
        //路基病害结果选项
        if (this.damage.installationType === 1) {
          list = this.damageStatusLjList
        } else if (this.damage.installationType === 3) {
          list = this.damageStatusSdList
        }
        list.map(x => {
          if (x.risk === risk) {
            damageStatusList = x.damage
          }
        })
        this.$set(this, "damageStatus", '');
        this.$set(this, "damageStatusList", damageStatusList);
      },
      //获取路线列表
      async changeDept() {
        let res = await getRoadSelectList({deptId: this.userInfo.deptTreeId})
        this.deptRoadList = res.data
      },
      //整治
      async repair(row) {
        this.repairVo = JSON.parse(JSON.stringify(row))
        this.handleStatus = row.handleStatus
        this.monitorStatus = row.monitorStatus
        this.activeNames = '1'
        this.isShowRepairDialog = true
      },
      async lookDetail(row) {
        this.patrol = row
        let res = await queryTimeline({id: row.id})
        this.timelineData = res?.data || []
        this.isShowDetailDialog = true
      },
      async lookDamageDetail(row) {
        this.repairVo = row
        let res = await handleDamageTimeline({id: row.id})
        this.timelineData = res?.data || []
        this.isShowDamageDetailDialog = true
      },
      // 表单提交
      validateAddForm() {
        this.$refs.patrol.validate((valid) => {
          if (valid) {
            this.submit()
          }
        })
      },
      async submitEnd() {
        let res = await endPatrol(this.endPatrolVo)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '成功！'
          })
        }
        this.isShowEndDialog = false
        this.queryList()
      },
      //整治
      async submitRepair() {
        let res = await repairDamage(this.repairVo)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '成功！'
          })
        }
        this.isShowRepairDialog = false
        this.queryList()
      },
      //结束巡查
      async endPatrol(row) {
        this.patrol = row ? row : this.damage
        //结束巡查
        this.endPatrolVo = {
          id: this.patrol.id ? this.patrol.id : this.patrol.roadPatrolId
        }
        this.isShowAddDamageDialog = false
        this.isShowEndDialog = true
      },
      async deletePatrol(id){
        let res = await deletePatrol({id:id})
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '删除成功！'
          })
        }
        this.queryList()
      },
      async submitDamage() {
        let form = this.damage
        let res = await addDamagePatrol(form)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '添加成功！'
          })
          this.damage = {
            roadPatrolId: form.roadPatrolId,
          }
          this.$refs.uploadPic.clears()
        }
      },
      async submitUpdateDamage() {
        let form = this.damage
        let res = await updateDamagePatrol(form)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '修改成功！'
          })
        }
        this.isShowUpdateDamageDialog = false
      },
      async submit() {
        let res = await addPatrol(this.patrol)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: this.patrol.id ? '更新成功！' : '添加成功！'
          })
          this.isShowAddDialog = false
          this.queryList()
        }
      },
      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      async queryList() {
        this.isLoading = true
        let timerArray = this.timerArray || []
        this.form.startCreateTime = timerArray[0]
        this.form.endCreateTime = timerArray[1]
        let action = getPatorlList
        if (this.radio === '病害列表') {
          action = getDamagePatrolList
        } else if (this.radio === '统计') {
          this.statisticsAll();
          return
        }
        let res = await action(this.form)
        this.tableList = res.data?.records || []
        this.form.page = Number(res.data?.current)
        this.form.total = Number(res.data?.total)
        this.isLoading = false
      },
      addPatrol() {
        this.isShowAddDialog = true
        this.patrol = {
          deptTreeId: this.userInfo.deptTreeId,
          investigator: this.userInfo.name
        }
        this.$nextTick(() => {
          this.$refs.patrol.clearValidate()
        })
      },
      handleEdit(row) {
        this.isShowAddDialog = true
        this.patrol = JSON.parse(JSON.stringify(row))
        this.$nextTick(() => {
          this.$refs.patrol.clearValidate()
        })
      },
      addDamage(id) {
        this.isShowAddDamageDialog = true
        this.damage = {
          roadPatrolId: id,
        }
        this.$nextTick(() => {
          this.$refs.damage.clearValidate()
        })
      },
      updateDamage(row) {
        this.isShowUpdateDamageDialog = true
        this.damage = row
        this.$nextTick(() => {
          this.$refs.damage.clearValidate()
        })
      },
      async deleteDamage(id){
        let res = await deleteDamagePatrol({id:id})
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '删除成功！'
          })
        }
        this.queryList()
      },
      // 查看大图
      previewImg(url) {
        let list = [url]
        this.$refs.imageViewer.showViewer(list, 0)
      },
      // 展开并发
      async queryDamageList(row, list) {
        this.loading = true
        let item = list.find(x => x.id === row.id)
        // item不存在，则当前是关闭
        if (!item) return false
        const {data} = await queryByRoadPatrol({id: row.id})
        row.children = data
        this.loading = false
      },
    },
    mounted() {
      this.left_col = 24
      this.right_col = 0
      this.changeDept()
      this.queryList()
      this.queryDictList(['EnumPatrolHandleStatus', 'EnumPatrolRoadType', 'EnumMonitorStatus', 'EnumSysBoolean', 'EnumPosition', 'EnumWorkPointPosition', 'EnumBridgeType', 'EnumRoadPatrolStatus', 'EnumDamageRiskType1', 'EnumDamageRiskType2', 'EnumDamageRiskType3', 'EnumDamageRiskType27', 'EnumDamageInstallationType'],
        ['EnumPatrolHandleStatusList', 'EnumPatrolRoadTypeList', 'EnumMonitorStatusList', 'EnumSysBooleanList', 'EnumPositionList', 'EnumWorkPointPositionList', 'EnumBridgeTypeList', 'EnumRoadPatrolStatusList', 'EnumDamageRiskType1List', 'EnumDamageRiskType2List', 'EnumDamageRiskType3List', 'EnumDamageRiskType27List', 'EnumDamageInstallationTypeList']);
    },

  }
</script>

<style lang="less" scoped>
  .el-divider__text {
    font-size: 20px;
  }

  .statistics /deep/ .el-form-item {
    margin-bottom: 10px;
  }

  .statistics /deep/ .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 10px 0 30px 0;
  }

  /deep/ .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 30px 0;
  }

  /deep/ .el-input-group__prepend {
    border-right: 0;
    //background: #2196f3;
    //color: white;
  }

  .select_form_label /deep/ .el-form-item__label {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    //background: #2196f3;
    //color: #ffffff !important;
    display: flex;
    justify-content: center;
  }

  .select_form_label /deep/ .el-collapse .el-collapse-item__header {
    font-size: 20px;
    border-bottom: 1px solid;
    border-bottom-left-radius: 20px;
  }

  .head_div /deep/ .el-col {
    line-height: 40px;
    color: gray;
  }

  .line {
    text-align: center;
    box-sizing: border-box;
    align-items: center;
    height: 40px;
    line-height: 40px;
  }

  .time_line {
    margin: 20px 10%;
  }

  .time_line_div div {
    margin: 10px;
  }

  .time_line_div span {
    font-weight: 600;
  }
</style>
